import React, { Component } from 'react';
import {
    Layout, Button, Tabs, Tooltip, Select,
    Input, Row, Col, Modal, Radio,
    Divider, Card, Steps, InputNumber, Drawer,
    message, Table, Upload,Space,
} from 'antd';
import '../App.css';
import {
    CopyOutlined, SearchOutlined, InfoOutlined, InfoCircleuOtlined,
    AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined,
    InsertRowAboveOutlined, InsertRowBelowOutlined,
    InsertRowLeftOutlined, InsertRowRightOutlined,
    DeleteRowOutlined, DeleteColumnOutlined,
    FileAddOutlined, BoldOutlined, ItalicOutlined, UnderlineOutlined,
    TableOutlined, BorderTopOutlined, BorderRightOutlined, BorderBottomOutlined, BorderLeftOutlined,
    SmallDashOutlined, BorderOutlined, DragOutlined, SaveOutlined, RollbackOutlined, FundViewOutlined,
    FormOutlined, SettingOutlined, InfoCircleOutlined, ClearOutlined, UploadOutlined,
    DownloadOutlined
} from '@ant-design/icons';
import Workbook from '../pages/model/workbook';
import ViewReport from './viewReport';
import {Link} from "react-router-dom";

import '../pages/webExcel.css'

import {newReport,getAccountReportParameter} from "../api/report_table";
import {getAccount_sets,getAccounts} from "../api/accountFormula";
import {getReadXlsConfig} from "../api/dt";

const { Header, Content, Footer } = Layout;
const { Option } = Select;
const { TabPane } = Tabs;
const { Search } = Input;
export default class EditReport extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initValues: null,  // 初始值
            modalTitle: '',
            isModalVisible:false,  //公式编辑窗口
            fomulaTyperadioValue:1,   //账上取余额、账上取发生额公式
            fomulaDCradioValue:1,  //1是借方  2 是贷方
            fomulaTargetRadioValue:1,//1 本位币余额  2
            fomulaPeriodRadioValue:1, //会计期间
            currentStep:0,  //当前步骤  公司向导步骤
            accountYear:2022,

            accountSets:[],          //账套信息
            formulaYear:2021,
            formulaMonth:1,
            formulaAccountSetId:"", //选中的账套
            tempFormula:"", //临时公式
            isModalVisibleForSelAccount:false ,  //选择科目窗口
            accouts:[],  //科目  供选择科目的时候用
            accountForFormula:"",  //表示的是  财务函数
            selectedAccount:-100 ,  //选中的科目
            drawerVisible:false,  //抽屉可见性
            decimalPlace:2      //保留小数位数
        };
    }

    workbookRef=(ref)=>{
        this.workbook = ref

    }
    //保存表
    saveTable=()=>{
        let _report_id=this.props.match.params.id
        this.workbook.saveTable(_report_id);
    }
    //追加行
    appendRow=()=>{
        this.workbook.appendRow();
    }
    insertRow=()=>{
        this.workbook.insertRow();
    }
    deleteRow=()=>{
        this.workbook.deleteRow();
    }
    //追加列
    appendCol=()=>{
        this.workbook.appendCol();
    }
    insertCol=()=>{
        this.workbook.insertCol();
    }
    deleteCol=()=>{
        this.workbook.deleteCol();
    }
    align=(d)=>{
        this.workbook.align(d);
    };

    hidenData=(v)=>{
        this.workbook.hidenData(v);
    };
    //千分位格式
    isThousandsFormat=()=>{
        this.workbook.isThousandsFormat();
    }

    //precentage格式
    isPercentageFormat=()=>{
        this.workbook.isPercentageFormat();
    }

    //设置小数位
    setDecimalPlaces=()=>{
        let _p=this.state.decimalPlace;
        this.workbook.setDecimalPlaces(_p);
    }

    //清除所有数字格式
    clearNumFormat=()=>{
        this.workbook.clearNumFormat();
    }


    editFont=(t)=>{
        this.workbook.editFont(t);
    }

    viewReport=(id)=>{




}

    //选择字体
    handleFontChange=(value)=>{
        let t=101;
        switch(value) {
            case 'microYH':
                t=101;
                break;
            case 'st':
                t=102;
                break;
            case 'xst':
                t=103;
                break;
            case 'ht':
                t=104;
                break;
            case 'fs':
                t=105;
                break;
            case 'kt':
                t=106;
                break;
            default:
                t=101;
        }
        this.workbook.editFont(t);
    }
    //选择字体
    handleFontSizeChange=(value)=>{
        let t=201;
        switch(value) {
            case 'medium':
                t=201;
                break;
            case 'small':
                t=202;
                break;
            case 'large':
                t=203;
                break;
            case 'x-small':
                t=204;
                break;
            case 'x-large':
                t=205;
                break;
            case 'xx-large':
                t=206;
                break;
            default:
                t=201;
        }
        this.workbook.editFont(t);
    }


    //转变小数位数的选择
    handleDecimalChange=(value)=>{
            this.setState({decimalPlace:value})
    }

    modifyBorderStyle=(t)=>{
        this.workbook.modifyBorderStyle(t);
    }
    mergeCells=()=>{
        this.workbook.mergeCells();
    }
    splitCells=()=>{
        this.workbook.splitCells();
    }
    goBack=()=>{
        window.history.back()
    }

    setFormat=()=>{
        //window.history.back()
    }

    cancelModal = () => {
        this.setState({
            isModalVisible: false,
        });
    };

//选择科目的modal
    cancelModal_selectAccount = () => {
        this.setState({
            isModalVisibleForSelAccount: false,
        });
    };

// 选择科目
    handleOk_selectAccount= () => {
        this.setState({
            isModalVisibleForSelAccount: false,
        });
    };

    saveFormulaToCell=()=>{
        let _formulaTxt=this.state.tempFormula
        this.workbook.saveFormulaToCell(_formulaTxt);
        //关闭Modal
        this.setState({isModalVisible:false})
    };

    handleOk = (reportName) => {
        let _o={name:reportName,typeid:501};
        newReport(_o).then(
            (res) => {
                console.log("get newReport response:", res.data);
                let _data=this.state.data;
                _data.push({id:res.data,
                    name:reportName,
                    tableDesc:"",
                    typeid:501
                })

                // this.setState({data:_data});
                this.setState({
                    isModalVisible: false,
                    data:_data
                });
            },
            (error) => {
                console.log("get response failed!");
                alert(error)
                this.setState({
                    isModalVisible: false
                })
            }
        );
    };

    //打开设置公式的窗口
    openModal = () => {
        //查询
        let _hasSelectedCell=this.hasSelectedCell();
        let  _formulaTxt="";
        if(_hasSelectedCell==-1){
            message.error("没有选择单元格")
            return
        }else{
            //获取已选择单元格的值
            let _SelectCellValue=this.getSelectCellValue();
            if(_SelectCellValue.length>0){
                if(_SelectCellValue.substring(0,1)=="@"){ //是公式
                     _formulaTxt=_SelectCellValue.substring(1);
                }
            }
        }

        getAccount_sets().then(
            (res) => {
                this.setState({
                    isModalVisible: true,
                    accountSets:res.data,
                    tempFormula:_formulaTxt,
                    currentStep:0,
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    };

    //设置参数
    setParam=()=>{
        //先读取
        getAccountReportParameter().then(
            (res) => {
                //setReadXlsConfig(res.data);
                this.setState({drawerVisible:true})
            },
            (error) => {
                console.log(" getParamConfig failed!");
            }
        );
    }


     handleCancel = () => {
         this.setState({
             isModalVisible: false,
         });
    };

     callback=(key)=> {
        console.log(key);
    }







     uploadProps = {
        name: 'file',
        action: '/reportapi/report/reportWorkbook/importModel',
        // accept:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
        // 接受的文件类型
         data:{id:this.props.match.params.id},
        accept: '.xls,.xlsx',
        headers: {
            authorization: 'authorization-text'
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                //message.success(`${info.file.name} file uploaded successfully`);
               //todo xj
                // location.reload();





            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

//导出设计模板
     exportExcel=()=>{
         let id=this.props.match.params.id;
        const url = "/reportapi/report/reportWorkbook/exportModel?id="+id;
        window.open(url);
    }


    fomulaTypeOnChange = (e) => {
        this.setState({ fomulaTyperadioValue: e.target.value })
    }

    fomulaDCOnChange = (e) => {
        this.setState({ fomulaDCradioValue: e.target.value })
    }

    fomulaTargetOnChange = (e) => {
        this.setState({ fomulaTargetRadioValue: e.target.value })
    }

    fomulaPeriodOnChange = (e) => {
        this.setState({ fomulaPeriodRadioValue: e.target.value })
    }
    //是否选择了单元格
    hasSelectedCell=()=>{
       return this.workbook.hasSelectedCell();
    };
     //获取选择单元格的值
     getSelectCellValue=()=>{
         return this.workbook.getSelectCellValue();
     }

     //设置公式文本
     setFormulaTxt=(e)=>{
         console.log("setFormulaTxt:"+e.target.value);

         this.setState({tempFormula:e.target.value})

     }


     radioStyle = {    //fomulaType  按钮样式
        display: 'block',
        height: '30px',
        lineHeight: '30px',
    };

     onSearch = value => console.log(value);

//选择testtesat
    onSearch_account=()=>{
        //todo
            //查询
        // 账套  年度 表名称 setId,year,tableName
        let _setId=this.state.formulaAccountSetId;
        let _year=this.state.accountYear;
        let _table="glacnt"

        if(_setId==""){
            message.error("请选择账套")
            return;
        }

        getAccounts(_setId,_year,_table).then(
            (res) => {
                this.setState({
                    isModalVisibleForSelAccount: true,
                    accouts:res.data,
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
    }

    onSearch_org=()=>{

    }

    onSearch_person=()=>{

    }

    onSearch_currency=()=>{

    }


     //在公式向导中 设置年
    onChange_year=(value)=>{
        this.setState({formulaYear:value})
    }
    onChange_month=(value)=>{
        this.setState({formulaMonth:value})
    }

    //选择账套
    handleChange_accountSet=(value)=>{
        this.setState({formulaAccountSetId:value})
    }

    handleChange_year=(value)=>{
        this.setState({accountYear:value})
    }


     onClose_Drawer = () => {
        this.setState({drawerVisible:false});
    };


     next = () => {
        //setCurrent(current + 1);
         let s3=this.state.currentStep+1;
         if(s3==3){
             let _type=this.state.fomulaTyperadioValue;
             let _target=this.state.fomulaTargetRadioValue;
             let _dc=this.state.fomulaDCradioValue;
             let _setId=this.state.formulaAccountSetId;
             let _appendFormulaStr="";
             switch(_type) {
                 case 1: {
                     console.log("Excellent");
                     switch(_target) {
                         case 1: {
                             switch(_dc) {
                                 case 1: {                  //1  账上余额  本位币  借方
                                     _appendFormulaStr="JYE"
                                     break;
                                 }
                                 case 2: {          //2
                                     _appendFormulaStr="DYE"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JYE"
                                     break;
                                 }
                             }
                             break;
                         }
                         case 2: {
                             switch(_dc) {
                                 case 1: {  //3
                                     _appendFormulaStr="JNYE"
                                     break;
                                 }
                                 case 2: {      //4
                                     _appendFormulaStr="DNYE"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JNYE"
                                     break;
                                 }
                             }
                             break;
                         }
                         case 3: {
                             switch(_dc) {
                                 case 1: {      //5
                                     _appendFormulaStr="JQYE"
                                     break;
                                 }
                                 case 2: {      //6
                                     _appendFormulaStr="DQYE"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JQYE"
                                     break;
                                 }
                             }
                             break;
                         }
                         case 4: {
                             switch(_dc) {
                                 case 1: {      //7
                                     _appendFormulaStr="JFYE";
                                     break;
                                 }
                                 case 2: {      //8
                                     _appendFormulaStr="DFYE";
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JFYE";
                                     break;
                                 }
                             }
                             break;
                         }
                         default: {
                             console.log("Invalid choice");
                             break;
                         }
                     }

                     break;
                 }
                 case 2: {
                     switch(_target) {
                         case 1 : {
                             switch(_dc) {
                                 case 1: {      //9
                                     _appendFormulaStr="JLJ"
                                     break;
                                 }
                                 case 2: {  //10
                                     _appendFormulaStr="DLJ"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JLJ"
                                     break;
                                 }
                             }
                             break;
                         }
                         case 2 : {
                             switch(_dc) {
                                 case 1: {      //11
                                     _appendFormulaStr=""
                                     break;
                                 }
                                 case 2: {      //12
                                     _appendFormulaStr=""
                                     break;
                                 }
                                 default: {
                                     console.log("Invalid choice");
                                     break;
                                 }
                             }
                             break;
                         }
                         case 3 : {
                             switch(_dc) {
                                 case 1: {      //13
                                     _appendFormulaStr="JQLJ"
                                     break;
                                 }
                                 case 2: {      //14
                                     _appendFormulaStr="DQLJ"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JQLJ"
                                     break;
                                 }
                             }
                             break;
                         }
                         case 4 : {
                             switch(_dc) {
                                 case 1: {  //15
                                     _appendFormulaStr="JFLJ"
                                     break;
                                 }
                                 case 2: {  //16
                                     _appendFormulaStr="DFLJ"
                                     break;
                                 }
                                 default: {
                                     _appendFormulaStr="JFLJ"
                                     break;
                                 }
                             }
                             break;
                         }
                         default: {
                             console.log("Invalid choice");
                             break;
                         }
                     }
                     break;
                 }
                 default: {
                     console.log("Invalid choice");
                     break;
                 }
             }

             let _tempFormula=this.state.tempFormula+""+_appendFormulaStr;
             if(_tempFormula!=undefined && _tempFormula !=""){
                _tempFormula=_tempFormula+"("+this.state.accountForFormula+",,,,,,,,,,)"
             }
             this.setState({currentStep:this.state.currentStep+1,tempFormula:_tempFormula});

             // let _inputElement=document.getElementById("tempFormulaInput");
             // _inputElement.value=_tempFormula;  //临时公式编辑框的值

         }else{
             this.setState({currentStep:this.state.currentStep+1});
         }

    };

     prev = () => {
        //setCurrent(current - 1);
         this.setState({currentStep:this.state.currentStep-1});
    };

     //设置公式类型
     setFormulaType=()=>{
        return <>
                <Radio.Group onChange={this.fomulaTypeOnChange} value={this.state.fomulaTyperadioValue}>
                    <Radio style={this.radioStyle} value={1}>
                        账上取余额公式
                    </Radio>
                    <Radio style={this.radioStyle} value={2}>
                        账上取发生额公式
                    </Radio>
                    {/*<Radio style={this.radioStyle} value={3}>*/}
                        {/*现金收支类别取数公式*/}
                    {/*</Radio>*/}
                </Radio.Group>
                <Divider/>

                选择账套单位：
                <Select  style={{ width: 240 }}
                         defaultValue={this.state.formulaAccountSetId}  //默认账套信息
                         onChange={this.handleChange_accountSet}
                >
                    {
                        this.state.accountSets.map((item, index) => {
                            return (
                                <Option value={item.setid} key={"accountSets" + item.setid}>{item.fname}</Option>
                            )
                        })
                    }
                </Select>
            </>
     }
    //设置目标数据与会计区间
    setTargetData=()=>{
        return <Row>
            <Col span={12}>
            <Card title="目标数据"  style={{ width: 300 }}>
    <Radio.Group onChange={this.fomulaTargetOnChange} value={this.state.fomulaTargetRadioValue}>
    <Radio style={this.radioStyle} value={1}>
            本位币余额
            </Radio>
        <Radio style={this.radioStyle} value={2}>
            只取本位币余额
        </Radio>
        <Radio style={this.radioStyle} value={3}>
            数量余额
            </Radio>
        <Radio style={this.radioStyle} value={4}>
            原币余额
        </Radio>
        </Radio.Group>
    </Card>


    </Col>
        <Col span={12}>
            <Card title="借贷："  style={{ width: 300 }}>
                <Radio.Group onChange={this.fomulaDCOnChange} value={this.state.fomulaDCradioValue}>
                    <Radio style={this.radioStyle} value={1}>
                        借方
                    </Radio>
                    <Radio style={this.radioStyle} value={2}>
                        贷方
                    </Radio>
                </Radio.Group>
            </Card>
        </Col>
        </Row>
    }

    //设置账户信息
    setAccountInfo=()=>{
        return <>
            <Row>
                <Col span={12}>
                    年度：<Select key="account_year" defaultValue="2022" style={{ width: 200 }} onChange={this.handleChange_year}>
                    <Option value="2016">2016</Option>
                    <Option value="2017">2017</Option>
                    <Option value="2018">2018</Option>
                    <Option value="2019">2019</Option>
                    <Option value="2020">2020</Option>
                    <Option value="2021">2021</Option>
                    <Option value="2022">2022</Option>
                    <Option value="2023">2023</Option>
                    <Option value="2024">2024</Option>
                    <Option value="2025">2025</Option>
                    <Option value="2026">2026</Option>
                    <Option value="2027">2027</Option>
                    <Option value="2028">2028</Option>
                    <Option value="2029">2029</Option>
                    <Option value="2030">2030</Option>
                </Select>
                </Col>
                <Col span={3}>科目：</Col>
                <Col span={9}>
                    <Search placeholder="input search account"
                            value={this.state.accountForFormula}
                            onSearch={this.onSearch_account} style={{ width: 200 }}>

                    </Search>
                </Col>
            </Row>

            <Divider/>
            <Row>
                <Col span={12}>
                    往来：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
                <Col span={12}>
                    个人：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
            </Row>
            <Divider/>
            <Row >
                <Col span={12}>
                    部门：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />

                </Col>
                <Col span={12}>
                    产品：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
            </Row>
            <Divider/>
            <Row  >
                <Col span={12}>
                    工程：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
                <Col span={12}>
                    项目：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
            </Row>
            <Divider/>
            <Row >
                <Col span={12}>
                    币别：<Search placeholder="input search text" allowClear onSearch={this.onSearch} style={{ width: 200 }} />
                </Col>
                <Col span={12}></Col>
            </Row>
        </>
    }

    //公式预览
    setFormulaView=()=>{
        const { TextArea } = Input;
        return <>
            <Row>
                <TextArea
                    id="tempFormulaInput"
                    rows={4}
                    defaultValue={this.state.tempFormula}
                    onChange={this.setFormulaTxt}
                    style={{width:800}}>
                </TextArea>
                <Divider/>
            </Row>



        </>
    }

// 因为涉及项目隐私 这里我省略了一些东西
     stepItem = () => {
         let currentNum=this.state.currentStep;
         if (currentNum == 0) {
             return this.setFormulaType();
         } else if (currentNum == 1) {
             return this.setTargetData();
         }else if (currentNum == 2) {
             return this.setAccountInfo();
         }else if (currentNum == 3) {
             return this.setFormulaView();
            // return this.setAccountInfo();
         }
     }

     rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`test selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            //todo
            let _code=selectedRows[0].fcode;
            console.log(_code );
            this.setState({accountForFormula:_code})        //设置
        },
        getCheckboxProps: (record) => ({
         }),
    };

    render() {
       let _report_id=this.props.match.params.id;
        const { Step } = Steps;


        const columns = [
            {
                title: '科目编码',
                dataIndex: 'fcode',
            },
            {
                title: '科目名称',
                dataIndex: 'fdesc',
            }
        ];


       return (
            <Layout>
                <Content>
                    <div  style={{textAlign:1}}>
                        {/*<h>.....</h>*/}
                    </div>
                    <Row>
                        <Tooltip title="save">
                            <Button   onClick={this.saveTable} icon={<SaveOutlined/>} />
                        </Tooltip>
                        <Tooltip title="FileAdd">
                            <Button  icon={<FileAddOutlined  />} />
                        </Tooltip>
                        <Tooltip title="copy">
                            <Button  icon={<CopyOutlined  />} />
                        </Tooltip>
                        <Tooltip title="copy">
                            <Button  icon={<CopyOutlined  />} />
                        </Tooltip>

                        <Select defaultValue="microYH" style={{ width: 120 }} onChange={this.handleFontChange}>
                            <Option value="microYH">微软雅黑</Option>
                            <Option value="st">宋体</Option>
                            <Option value="xst">新宋体</Option>
                            <Option value="ht">黑体</Option>
                            <Option value="fs">仿宋</Option>
                            <Option value="kt">楷体</Option>
                        </Select>

                        <Select defaultValue="medium" style={{ width: 120 }} onChange={this.handleFontSizeChange}>
                            <Option value="medium">medium</Option>
                            <Option value="small">small</Option>
                            <Option value="large">large</Option>
                            <Option value="x-small">x-small</Option>
                            <Option value="x-large">x-large</Option>
                            <Option value="xx-large">xx-large</Option>
                        </Select>

                        <Tooltip title="Bold">
                            <Button  icon={<BoldOutlined />}  onClick={() => this.editFont(2)}/>
                        </Tooltip>
                        <Tooltip title="Italic">
                            <Button  icon={<ItalicOutlined />}  onClick={() => this.editFont(3)}/>
                        </Tooltip>
                        <Tooltip title="Underline">
                            <Button  icon={<UnderlineOutlined />}   onClick={() => this.editFont(4)}/>
                        </Tooltip>
                        <Tooltip title="insertRow">
                            <Button  icon={<InsertRowAboveOutlined   />}  onClick={() => this.insertRow()} />
                        </Tooltip>
                        <Tooltip title="appendRow">
                            <Button  icon={<InsertRowBelowOutlined/>}   onClick={() => this.appendRow()}/>
                        </Tooltip>
                        <Tooltip title="DeleteRow">
                            <Button  icon={<DeleteRowOutlined/>}   onClick={() => this.deleteRow()}/>
                        </Tooltip>
                        <Tooltip title="insertCol">
                            <Button  icon={<InsertRowLeftOutlined />}  onClick={() => this.insertCol()}/>
                        </Tooltip>
                        <Tooltip title="appendCol">
                            <Button  icon={<InsertRowRightOutlined />}   onClick={() => this.appendCol()} />
                        </Tooltip>
                        <Tooltip title="DeleteColumn">
                            <Button  icon={<DeleteColumnOutlined />} onClick={() => this.deleteCol()}/>
                        </Tooltip>


                        <Tooltip title="AlignLeft">
                            <Button  icon={<AlignLeftOutlined/>}  onClick={() => this.align(1)}/>
                        </Tooltip>
                        <Tooltip title="AlignCenter">
                            <Button  icon={<AlignCenterOutlined/>}  onClick={() => this.align(2)}/>
                        </Tooltip>
                        <Tooltip title="AlignRight">
                            <Button  icon={<AlignRightOutlined/>}   onClick={() => this.align(3)}/>
                        </Tooltip>

                        <Tooltip title="is Thousands Format">
                            <Button   onClick={() => this.isThousandsFormat()}>，</Button>
                        </Tooltip>

                        <Tooltip title="is Percentage format">
                            <Button   onClick={() => this.isPercentageFormat()}>%</Button>
                        </Tooltip>

                        <Select defaultValue="2" style={{ width: 50 }} onChange={this.handleDecimalChange}>
                            <Option value="0">0</Option>
                            <Option value="1">1</Option>
                            <Option value="2">2</Option>
                            <Option value="3">3</Option>
                            <Option value="4">4</Option>
                            <Option value="5">5</Option>
                        </Select>

                        <Tooltip title="Decimal point">
                            <Button  onClick={() => this.setDecimalPlaces()}>.00</Button>
                        </Tooltip>


                        <Tooltip title="clear cell  number format">
                            <Button  icon={<ClearOutlined />}   onClick={() => this.clearNumFormat()}/>
                        </Tooltip>

                        <Tooltip title="TableOutlined">
                            <Button  icon={<TableOutlined />} onClick={() => this.modifyBorderStyle(2)}/>
                        </Tooltip>
                        <Tooltip title="cancelTableOutlined">
                            <Button  icon={<SmallDashOutlined />}  onClick={() => this.modifyBorderStyle(0)}/>
                        </Tooltip>
                        <Tooltip title="BorderTopOutlined">
                            <Button  icon={<BorderTopOutlined />} onClick={() => this.modifyBorderStyle(3)}/>
                        </Tooltip>
                        <Tooltip title="BorderRightOutlined">
                            <Button  icon={<BorderRightOutlined />} onClick={() => this.modifyBorderStyle(4)}/>
                        </Tooltip>
                        <Tooltip title="BorderBottomOutlined">
                            <Button  icon={<BorderBottomOutlined />} onClick={() => this.modifyBorderStyle(5)}/>
                        </Tooltip>
                        <Tooltip title="BorderLeftOutlined">
                            <Button  icon={<BorderLeftOutlined />} onClick={() => this.modifyBorderStyle(6)}/>
                        </Tooltip>
                        <Tooltip title="mergeCells">
                            <Button  icon={<BorderOutlined />}   onClick={() => this.mergeCells()}/>
                        </Tooltip>
                        <Tooltip title="DragOutlined">
                            <Button  icon={<DragOutlined />}   onClick={() => this.splitCells()}/>
                        </Tooltip>


                        <Tooltip title="hiden Data">
                            <Button  icon={<InfoCircleOutlined />} onClick={() => this.hidenData(1)}/>
                        </Tooltip>

                        <Tooltip title="show Data">
                            <Button  icon={<InfoOutlined />} onClick={() => this.hidenData(0)}/>
                        </Tooltip>

                        <Tooltip title="Account Fomula">
                            <Button  icon={<FormOutlined/>} onClick={() => this.openModal()}/>
                        </Tooltip>

                        <Tooltip title="set Parameter">
                            <Button  icon={<SettingOutlined/>} onClick={() => this.setParam()}/>
                        </Tooltip>


                        <Tooltip title="viewReport">
                            <Link  key={"ttttt21"}
                                   to={ '/viewReport/'+this.props.match.params.id }
                            ><Button  icon={<FundViewOutlined/>}/></Link>
                        </Tooltip>

                        <Tooltip title="upload...">
                            <Upload {...this.uploadProps}>
                                <Button icon={<UploadOutlined />}></Button>
                            </Upload>
                        </Tooltip>

                        <Tooltip title="exportExcel">
                        <Button  key='exportExcel' icon={<DownloadOutlined />} onClick={this.exportExcel}></Button>
                        </Tooltip>

                        <Tooltip title="goback">
                            <Button  icon={<RollbackOutlined/>} onClick={() => this.goBack()}/>
                        </Tooltip>
                    </Row>
                      <div  style={{position: "relative"}} >
                        <Workbook onRef={this.workbookRef} reportId={_report_id} />
                          <Drawer title="设置" placement="right" onClose={this.onClose_Drawer} visible={this.state.drawerVisible}>

                          </Drawer>

                    </div>
                </Content>


                <Modal
                    width={840}
                    height={800}
                    title="设置单元格账务数据"
                    maskClosable={false}
                    visible={this.state.isModalVisible}
                    cancelText='返回'
                    destroyOnClose
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <>
                        <Card  bordered={false}>
                            <Steps
                                size="small"
                                type="navigation"
                                current={this.state.currentStep}>
                                <Step title="公式类型" />
                                <Step title="目标数据与会计期间" />
                                <Step title="账户" />
                                <Step title="公式预览"/>
                            </Steps>
                        </Card>
                        <Row>
                            {this.stepItem()}
                        </Row>
                        <Row>
                            <Card>
                                {this.state.tempFormula}
                            </Card>

                        </Row>

                        <Row>
                            {this.state.currentStep < 3 && (
                                <Button type="primary" onClick={ ()=>this.next()}>
                                    下一步
                                </Button>
                            )}
                            {this.state.currentStep  === 3 && (
                                <Button type="primary" onClick={this.saveFormulaToCell}>
                                    确定
                                </Button>
                            )}
                            {this.state.currentStep  > 0 && (
                                <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
                                    上一步
                                </Button>
                            )}
                        </Row>

                        <Divider/>

                        {/*<Row justify="center">*/}
                            {/*<Button onClick={this.saveFomula}>保存公式</Button>*/}
                            {/*<Button onClick={this.cancelModal}>取消</Button>*/}
                        {/*</Row>*/}

                        <Modal title="选择科目"
                               maskClosable={false}
                               visible={this.state.isModalVisibleForSelAccount}
                            onCancel={this.cancelModal_selectAccount}
                               onOk={this.handleOk_selectAccount}
                        >
                            <Table
                                rowSelection={{
                                    type: "radio",
                                    ...this.rowSelection,
                                }}
                                columns={columns}
                                dataSource={this.state.accouts}  //
                            />
                        </Modal>

                    </>

                </Modal>

            </Layout>
        )
    }
}
